<template>
    <div class="app-container">
        <el-form :inline="true" :model="queryParams" class="demo-form-inline">
            <el-form-item label="userID" prop="userId">
                <el-input v-model="queryParams.userId" placeholder="userID" />
            </el-form-item>

            <el-form-item label="项目ID" prop="productId">
                <el-input v-model="queryParams.productId" placeholder="项目ID" />
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
                <el-button type="primary" @click="reset">重置</el-button>
            </el-form-item>
        </el-form>

        <el-table v-loading="listLoading" :data="list" element-loading-text="Loading" border fit highlight-current-row>
            <el-table-column align="center" label="序号" width="95">
                <template slot-scope="scope">
                    {{ scope.$index }}
                </template>
            </el-table-column>

            <el-table-column label="项目id" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.productId }}</span>
                </template>
            </el-table-column>

            <el-table-column label="项目名称" align="center" prop="productName" />

            <el-table-column label="用户id" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.userId }}</span>
                </template>
            </el-table-column>
            <el-table-column label="用户名称" align="center">
                <template slot-scope="scope">
                    {{ scope.row.userName }}
                </template>
            </el-table-column>
            <el-table-column label="到期时间" align="center">
                <template slot-scope="scope">
                    {{ scope.row.expireTime }}
                </template>
            </el-table-column>

            <el-table-column label="备注" align="center">
                <template slot-scope="scope">
                    {{ scope.row.remarks }}
                </template>
            </el-table-column>

            <!-- <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button type="text" @click="handleEdit(scope.row)">审核</el-button>

                </template>
            </el-table-column> -->
        </el-table>
        <div class="pagination">
            <el-pagination :current-page.sync="queryParams.pageNum" :page-sizes="[10, 20, 30, 40]"
                :page-size.sync="queryParams.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"
                @size-change="fetchData" @current-change="fetchData" />
        </div>
        <!-- <showInfo ref="showInfo" /> -->
    </div>
</template>

<script>
import { productExpireList } from '@/api/table'
// import showInfo from './showInfo.vue'
export default {
    components: {
        // showInfo
    },
    data() {
        return {
            list: null,
            listLoading: true,
            timer: null,
            total: 0,
            typeOptions: [
                { label: '虚拟货币', value: 'usdt' },
                { label: '人民币', value: 'rmb' }
            ],
            statusOptions: [
                { label: '申请中', value: 'applying' },
                { label: '审核通过', value: 'approved' },
                { label: '审核驳回', value: 'reject' }
            ],
            queryParams: {
                'userId': '',
                'productId': '',
                'pageNum': 1,
                'pageSize': 10,
            }
        }
    },
    created() {
        this.fetchData()
        // this.timer = setInterval(() => {
        //   this.fetchData()
        // }, 10000)
    },
    destroyed() {
        console.log('销毁')
        clearInterval(this.timer)
    },
    methods: {
        setStateTxt(index) {
            console.log(index)
            let str = ''
            switch (index) {
                case 'applying':
                    str = '申请中'
                    break
                case 'approved':
                    str = '审核通过'
                    break
                case 'reject':
                    str = '审核驳回'
                    break
            }
            return str
        },
        fetchData() {
            this.listLoading = true
            productExpireList(this.queryParams).then(response => {
                this.list = response.data.records
                this.listLoading = false
                this.total = response.data.total
            })
        },
        handleShowInfo(e) {
            this.$refs.showInfo.show(e)
        },

        onSubmit() {
            this.queryParams.page = 1
            this.fetchData()
        },
        reset() {
            this.queryParams = {
                'hash': '',
                'orderNo': '',
                'pageNum': 1,
                'pageSize': 10,
                'status': '',
                'type': ''
            }
            this.fetchData()
        },

        handleEdit(e) {
            this.$refs.showInfo.show(e)
        },
        handleDel(e) {
            this.$confirm('此操作将取消订单, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                transactionCancel(e).then(res => {
                    this.fetchData()
                    this.$message({
                        type: 'success',
                        message: '成功!'
                    })
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消操作'
                })
            })
        }
    }
}
</script>
